<div class="example-container">
  <h2>Available numbers</h2>

  <div
    id="all"
    cdkDropList
    [cdkDropListData]="all"
    cdkDropListConnectedTo="even"
    class="example-list"
    (cdkDropListDropped)="drop($event)"
    [cdkDropListEnterPredicate]="noReturnPredicate">
    <div
      class="example-box"
      *ngFor="let number of all"
      [cdkDragData]="number"
      cdkDrag>{{number}}</div>
  </div>
</div>

<div class="example-container">
  <h2>Even numbers</h2>

  <div
    id="even"
    cdkDropList
    [cdkDropListData]="even"
    cdkDropListConnectedTo="all"
    class="example-list"
    (cdkDropListDropped)="drop($event)"
    [cdkDropListEnterPredicate]="evenPredicate">
    <div
      class="example-box"
      *ngFor="let number of even"
      cdkDrag
      [cdkDragData]="number">{{number}}</div>
  </div>
</div>

